<template>
  <div class="refund-order-mgr" v-loading.fullscreen.lock="loading">
    <page-main :pagination="pagination" @search-data="searchData" @page-change="pageChange">
      <template slot="search">
        <search-form :search="search"></search-form>
      </template>
      <template slot="table">
        <el-table fit stripe border highlight-current-row :data="orderList" height="100%">
          <el-table-column :resizable="false" prop="orderId" label="订单号" width="170px" header-align="center"></el-table-column>
          <el-table-column :resizable="false" prop="orderNoSub" label="子订单号" width="170px" header-align="center"></el-table-column>
          <el-table-column prop="buyerName" label="购买者" min-width="120px" header-align="center"></el-table-column>
          <el-table-column prop="buyerPhone" label="联系方式" min-width="120px" header-align="center"></el-table-column>
          <el-table-column prop="buyerAddress" label="购买者地址" min-width="180px" header-align="center"></el-table-column>
          <el-table-column prop="name" label="商品" min-width="120px" header-align="center"></el-table-column>
          <el-table-column prop="modelName" label="规格" min-width="120px" header-align="center"></el-table-column>
          <el-table-column prop="price" label="单价" min-width="100px" align="center"></el-table-column>
          <el-table-column prop="count" label="数量" min-width="100px" align="center"></el-table-column>
          <el-table-column prop="payPrice" label="总价" min-width="100px" align="center"></el-table-column>
          <el-table-column :resizable="false" label="配送方式" width="80px" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.buyMethod">{{i18n.getMsg(`orderMgr.buyMethod.${scope.row.buyMethod}`)}}</span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" label="下单时间" width="160px" align="center">
            <template slot-scope="scope">
              <span>{{scope.row.getDatetimeValue('createTime','YYYY-MM-DD HH:mm:ss')}}</span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" label="支付时间" width="160px" align="center">
            <template slot-scope="scope">
              <span>{{scope.row.getDatetimeValue('payTime','YYYY-MM-DD HH:mm:ss')}}</span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" label="退款时间" width="160px" align="center">
            <template slot-scope="scope" v-if="scope.row.status===3">
              <span>{{scope.row.getDatetimeValue('payTime','YYYY-MM-DD HH:mm:ss')}}</span>
            </template>
          </el-table-column>
          <el-table-column label="退款金额" min-width="100px" align="center">
            <template slot-scope="scope" v-if="scope.row.status===3">
              <span>{{scope.row.refusePrice}}</span>
            </template>
          </el-table-column>
          <el-table-column label="退款原因" min-width="180px" header-align="center">
            <template slot-scope="scope">
              <div v-html="scope.row.reasonHtml"></div>
            </template>
          </el-table-column>
          <el-table-column prop="approvalName" label="审核人" min-width="100px" align="center"></el-table-column>
          <el-table-column label="审核备注" min-width="180px" header-align="center">
            <template slot-scope="scope">
              <div v-html="scope.row.remarkHtml"></div>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" prop="statusStr" label="状态" width="80px" align="center"></el-table-column>
          <el-table-column :resizable="false" label="操作" width="140px" align="center" fixed="right">
            <template slot-scope="scope" v-if="scope.row.status===2&&scope.row.approvalName===''">
              <el-button size="mini" type="primary" @click="updateOrderStatus(scope.row,1)">同意</el-button>
              <el-button style="margin-left:0" size="mini" type="danger" @click="updateOrderStatus(scope.row,0)">拒绝</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </page-main>

    <el-dialog append-to-body title="退款审批" custom-class="sys-dialog" :close-on-click-modal="false" :visible.sync="openDialog" top="calc(50vh - 180px)"
      @closed="dialogClosed">
      <div style="height:300px;overflow:auto">
        <approval-order v-if="openDialog" :data="approvalData" @approval-success="approvalSuccess"></approval-order>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import OrderMgrApi from 'services/orderMgrApi';

  import PageMain from 'commonComponents/pageMain';
  import SearchForm from './searchForm';
  import ApprovalOrder from './approvalOrder';

  import Pagination from 'models/pagination';
  import RefundOrderSearch from 'models/financeMgr/refundOrderSearch';

  export default {
    data() {
      return {
        loading: false,
        search: new RefundOrderSearch(),
        pagination: new Pagination(),
        orderList: [],
        approvalData: null,
        openDialog: false
      };
    },

    created() {
      this.setOrderList(true);
    },

    methods: {
      setOrderList(isSearch = false) {
        let search = this.search;
        if (!isSearch) {
          search.resetOldData();
        }

        let pagination = this.pagination;
        this.loading = true;
        OrderMgrApi.getRefundOrderData(search, pagination).then(orderList => {
          if (isSearch) {
            search.setOldData();
          }

          if (orderList.length === 0 && pagination.currentPage > 1) {
            this.$nextTick(() => {
              this.setOrderList(isSearch);
            });
            return;
          }

          this.orderList = orderList;
          this.loading = false;
        }).catch(() => {
          this.loading = false;
        });
      },

      searchData() {
        this.pagination.currentPage = 1;
        this.setOrderList(true);
      },

      pageChange() {
        this.setOrderList();
      },

      updateOrderStatus(order, status) {
        this.approvalData = {
          order,
          status
        };
        this.openDialog = true;
      },

      approvalSuccess() {
        this.openDialog = false;
        this.setOrderList();
      },

      dialogClosed() {
        this.approvalData = null;
      }
    },

    components: {
      PageMain,
      SearchForm,
      ApprovalOrder
    }
  };

</script>

<style lang="scss" scoped>
  .refund-order-mgr {
    height: 100%;
  }

</style>
